<template>
  <el-dialog
    class="dia-style"
    :title="title"
    :visible.sync="open"
    append-to-body
    width="90%"
    :close-on-click-modal="false"
    @close="cancel"
  >
    <div class="dia-title">
      查询条件<i
        class="el-icon-s-operation"
        @click="showSearchForm = !showSearchForm"
        >{{ showSearchForm ? "点击收起" : "点击展开" }}</i
      >
    </div>
    <div style="position: relative">
      <HkSearchform
        v-if="showSearchForm"
        ref="formRef"
        :data="searchFormObj.searchData"
        :field-list="searchFormObj.fieldList"
        :listTypeInfo="searchFormObj.listTypeInfo"
        @handleSearch="handleQuery"
        @handleReset="handleReset"
      />
    </div>
    <div class="totalInfo" v-if="showTotalInfo">
      <div class="dia-title">
        统计信息<i
          class="el-icon-s-operation"
          @click="showTable = !showTable"
          >{{ showTable ? "点击收起" : "点击展开" }}</i
        >
      </div>
      <div class="totalInfo-cont flex" v-if="showTable">
        <div class="totalInfo-item" v-for="(item, index) in totalInfo">
          {{ item.name }}:{{ item.value }}
        </div>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </div>
    </div>
    <HkTable
      ref="tableRef"
      :loading="loading"
      :tableData="tableData"
      :tableColumns="tableList"
      :showIndex="true"
      :total="total"
      :operate="operateOpen"
      :queryParams="queryParams"
      @changePage="getTableList"
      :commonFixed="true"
    >
      <template #operate="scope">
        <el-button size="mini" type="text" @click="operateEvent(scope)"
          >{{ operateName }}
        </el-button>
      </template>
      <template #analyseType="scope">
        <span>{{
          scope.row.analyseType == "stream"
            ? "实时"
            : scope.row.analyseType == "batch"
            ? "批处理"
            : scope.row.analyseType == "cep"
            ? "序列"
            : ""
        }}</span>
      </template>
      <template #status="scope">
        <span>{{
          scope.row.status == "0"
            ? "关闭"
            : scope.row.status == "1"
            ? "开启"
            : "-"
        }}</span>
      </template>
      <template #vulnerabilitiesNumber="scope">
        <span>-</span>
      </template>
    </HkTable>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">关 闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import HkSearchform from "../common/HkSearchform/index.vue";
import HkTable from "../common/Hk-Table/index.vue";

export default {
  data() {
    return {
      // 查询参数
      queryParams: {
        size: 10,
        current: 1,
      },
      //  是否展示表格
      showTable: true,
      showSearchForm: false,
      // 对话框是否显示
      open: false,
    };
  },
  props: {
    // 是否显示统计信息
    showTotalInfo: {
      type: Boolean,
      default: false,
    },
    // 是否有操作按钮
    operateOpen: {
      type: Boolean,
      default: false,
    },
    // 统计信息数据
    totalInfo: {
      type: Array,
      default() {
        return [];
      },
    },
    operateName: {
      type: String,
      default: "详情",
    },
    // 标题
    title: {
      type: String,
      default: "设备列表",
    },
    // 表格数据
    tableData: {
      type: Array,
      default: () => [],
    },
    //  表格
    tableList: {
      type: Array,
      default: () => [],
    },
    searchFormObj: {
      type: Object,
      default: () => {},
    },
    // 遮罩层
    loading: {
      type: Boolean,
      default: false,
    },
    total: {
      type: Number,
      default: 0,
    },
  },
  watch: {
    open: {
      handler(newValue) {
        this.showTable = true;
      },
      immediate: true,
      deep: true,
    },
    "searchFormObj.searchData": {
      handler(newValue) {
        //  console.log(newValue);
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    toggleTable() {},
    /** 搜索按钮操作 */
    handleQuery(data) {
      this.queryParams.current = 1;
      this.getTableList(data);
    },
    // 重置按钮
    handleReset() {
      this.queryParams = {
        size: 10,
        current: 1,
      };
      this.getTableList();
    },
    getTableList(val) {
      this.queryParams = {
        ...this.searchFormObj.searchData,
        ...this.queryParams,
        ...val,
      };

      this.$emit("getTableList", this.queryParams);
    },
    // 清空表单
    resetFields() {
      this.$refs["form"].resetFields();
    },

    show(id) {
      return new Promise((resolve, reject) => {}).then((res) => {
        this.open = true;
      });
    },
    // 操作的事件
    operateEvent(val) {
      this.$emit("operateEvent", val);
    },
    // 提交事件
    async submitForm() {},
    // 关闭按钮
    cancel() {
      if (this.$refs.formRef) {
        this.$refs.formRef.handleReset();
      }
      this.queryParams = {
        size: 10,
        current: 1,
      };
      this.open = false;
    },
  },
  destroyed() {},
  components: { HkSearchform, HkTable },
};
</script>

<style lang="scss" scoped>
.dia-title {
  position: relative;
  width: 100%;
  padding: 0.625rem;
  font-size: 1.25rem;
  background-image: linear-gradient(
    270deg,
    rgba(59, 139, 255, 0) 0%,
    #063e62 100%
  );
}

::v-deep {
  .el-icon-arrow-left,
  .el-icon-arrow-right {
    background: none !important;
    border: none !important;
  }

  .el-dialog__body {
    max-height: 600px;
    display: flex;
    flex-direction: column;
  }

  .targetTable {
    flex: 1;
    overflow: auto;

    .el-table {
      overflow-y: auto;
      overflow-x: hidden;
    }
  }

  .el-table__fixed-right {
    transform: translateX(10px);
  }

  .el-table__fixed-right-patch {
    display: none;
  }

  .content {
    padding-bottom: 0;
  }

  .el-icon-s-operation {
    position: absolute;
    right: 20px;
    color: #00dfe0;
    cursor: pointer;
  }

  .el-form--inline .el-form-item {
    margin-bottom: 0 !important;
  }

  .el-row {
    display: flex;
    align-items: flex-end;
  }

  /* 统计信息 */
  .totalInfo {
    padding: 20px 0 0;
  }

  .totalInfo-cont {
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 20px 0 0;

    .totalInfo-item {
      padding: 10px;
      margin-bottom: 10px;
      width: 15%;
      text-align: center;
      border-radius: 4px;
      background: rgba(59, 139, 255, 0.1);
    }

    span {
      width: 15%;
      height: 0;
    }
  }
}
</style>
